<template>
	<view class="u-rela">
		<!-- tab切换 -->
		<!-- <view style="width: 100%; height: 100rpx; position: fixed; top: 0; z-index: 999; background-color: #fff;">
			<u-tabs height="100" font-size="34" active-color="#000000" inactive-color="#999999" bar-width="80"
				bar-height="14" :bar-style="{borderRadius:'14rpx',backgroundColor:'#07C160',bottom:'20rpx',zIndex:'0'}"
				:active-item-style="{zIndex:1}" :list="categoryList" :is-scroll="true" :current="current" @change="change"
				name="category_name">
			</u-tabs>
		</view> -->
		<view class="page-top">
			<image :src="column_detail.image == '' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-food-1.png' : column_detail.image"
				mode="widthFix"></image>
			<!-- <div class="text-wrap">
				<view class="text-1">非遗传承</view>
				<view class="text-2">古老鲜活的文化历史，传承千年，滋养当下</view>
			</div> -->
		</view>
		<view class="page-wrap">
			<view class="u-font-44 blod">{{column_detail.title}}</view>
			<view class="desc">
				{{column_detail.content}}
			</view>
		</view>
		<view class="card-bg-w u-m-t-20" v-for="item in list" :key="item.id">
			<!-- 屯堡“八大碗” -->
			<view class="u-rela">
				<div class="u-flex u-row-between">
					<view class="u-font-34 blod">{{ item.title }}</view>
					<div class="btn-view" v-if="item.store_url" @click="toMiniPrograms(item.store_url)">
						<image src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-shop.png"
							mode="widthFix"></image>
						<text>查看商城</text>
					</div>
				</div>
				<view class="img-wrap">
					<image
						:src="item.thumbnail == '' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-food-2.png' : item.thumbnail"
						mode="widthFix"></image>
				</view>
				<!-- <view class="desc">
					南京夫子庙附近是南京市秦淮河畔，这里的环境优美，
					夜晚的夫子庙更是灯火辉煌，给人一种别样的美感。夜
					晚来到夫子庙，可以欣赏到美丽的灯光秀，还可以品尝
					到特色的夜市小吃。
				</view> -->
				<u-read-more class="read-more" :shadow-style="shadowStyle" show-height="160" close-text="展开"
					:toggle="true">
					<rich-text :nodes="item.content"></rich-text>
				</u-read-more>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				page: 1,
				isNext: true,
				list: [],
				current: 0,
				categoryList: [],
				column_detail: [],
			}
		},
		onLoad() {
			// 分类
			// this.get_category_index()
			
			// 栏目详情内容
			this.get_columns_detail()
			
			// 美食街列表
			this.get_villages_foodie()
		},
		onPullDownRefresh() {
			// 分类
			// this.get_category_index()
			
			// 栏目详情内容
			this.get_columns_detail()
			
			// 美食街列表
			this.page = 1
			this.list = []
			this.isNext = true
			this.get_villages_foodie()
		},
		onReachBottom() {
			this.get_villages_foodie()
		},
		methods: {
			change(index) {
				this.current = index;
				
				this.page = 1
				this.list = []
				this.isNext = true
				this.get_villages_foodie(this.categoryList[index].category_id)
			},
			// 分类
			get_category_index() {
				uni.showLoading({
					title: '加载中...'
				});
				let category = '美食物产'
				this.$http({
					url: this.api.category_index,
					method: 'GET',
					data: {
						type: category
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.categoryList = res.data
						this.get_villages_foodie(res.data[0].category_id)
					}
				})
			},

			// 美食街列表（16-美食物产）
			get_villages_foodie() {
				if (!this.isNext) return
				
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.villages_foodie,
					method: 'GET',
					data: {
						category_id: 27,
						page: this.page
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.isNext = res.data.isNext
						res.data.list.forEach(e => {
							this.list.push(e)
						})
						this.page++
					}
				})
			},
			
			// 栏目详情
			get_columns_detail() {
				this.$http({
					url: this.api.columns_detail,
					method: 'GET',
					data: {
						id: 3
					}
				}).then(res => {
					if (res.code == 1) {
						this.column_detail = res.data
					}
				})
			},
			
			// 跳转到其他小程序
			toMiniPrograms(path) {
				uni.navigateToMiniProgram({
				  appId: 'wx57b734c21351e3fa',
				  path: path,
				  extraData: {},
				  success(res) {}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-top {
		position: relative;
		width: 750rpx;
		height: 480rpx;
		z-index: 1;

		image {
			width: 100%;
			height: 100%;
		}

		.text-wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			text-align: center;

			.text-1 {
				font-size: 60rpx;
				font-family: AlimamaDongFangDaKai;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 140rpx;
			}

			.text-2 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-top: 100rpx;
			}
		}
	}

	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;




	}

	.desc {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 48rpx;
		margin-top: 20rpx;
	}

	.img-wrap {
		width: 690rpx;
		// height: 380rpx;
		margin-top: 35rpx;
		margin-bottom: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.btn-view {
		width: 190rpx;
		height: 66rpx;
		background: #07C160;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
	}

	.read-more {
		/deep/ .u-content__showmore-wrap {
			justify-content: flex-start;
			width: 160rpx;
			height: 66rpx;
			background: #F7FEFC;
			border: 1px solid #07C160;
			border-radius: 33rpx;
			padding-bottom: 0;
			text-align: center;
			padding-left: 38rpx;
			margin-top: 20rpx;

			text {
				font-size: 28rpx !important;
				color: #07C160 !important;
			}
		}

	}
</style>
<style>
	page {
		padding: 0;
	}
</style>